<template>
  <div id="userLoginView">
    <div class="loginContainer">
      <a-form
        :model="formState"
        :rules="rules"
        ref="formRef"
        name="loginForm"
        layout="vertical"
        autocomplete="off"
      >
        <div class="title">用户登录</div>
        <a-form-item label="账号" name="userAccount">
          <a-input v-model:value="formState.userAccount" placeholder="请输入账号" allow-clear />
        </a-form-item>

        <a-form-item label="密码" name="userPassword">
          <a-input-password
            v-model:value="formState.userPassword"
            placeholder="请输入密码"
            allow-clear
          />
        </a-form-item>

        <a-form-item name="remember" value-prop-name="checked">
          <div class="textbox">
            <div><a href="/user/forget">忘记密码？</a></div>
            <div><a href="/user/register">没有账号？去注册</a></div>
          </div>
        </a-form-item>

        <a-form-item>
          <a-button type="primary" block @click="handleSubmit"> 登录 </a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { FormInstance } from 'ant-design-vue/es/form'
import { userLoginUsingPost } from '@/service/api/userController'
import { message } from 'ant-design-vue'
import { useUserStore } from '@/stores/user'
import type { UserLoginType } from '@/types'
import { useRouter } from 'vue-router'

// 表单数据
const formState = ref({
  userAccount: '',
  userPassword: '',
})

// 表单引用
const formRef = ref<FormInstance>()

//用户登录态
const userStore = useUserStore()
// 表单校验规则
const rules = ref<unknown>({
  userAccount: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, message: '用户名长度至少 4 位', trigger: 'blur' },
  ],
  userPassword: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度至少 8 位', trigger: 'blur' },
  ],
})

const router = useRouter()
// 提交表单
const handleSubmit = async () => {
  try {
    formRef.value?.validate().then(async (valid) => {
      //校验通过
      if (valid) {
        console.log('登录数据：', formState.value)
        const res = await userLoginUsingPost({
          userAccount: formState.value.userAccount,
          userPassword: formState.value.userPassword,
        })

        if (res.data.code === 0) {
          message.success('登录成功')
          userStore.userLogin(res.data?.data as UserLoginType)

          router.push('/')
        } else {
          message.error(res.data.message || '登录失败')
        }
      }
    })
  } catch (error) {
    console.log('请求异常，登录失败', error)
    message.error('请求异常，登录失败')
  }
}
</script>

<style scoped>
#userLoginView {
  display: flex;
  justify-content: center;
  align-items: center;
}

.loginContainer {
  width: 480px;
  background: #fff;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.loginContainer .title {
  width: 100%;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}

.textbox {
  width: 100% !important;
  display: flex !important;
  justify-content: space-between;
  align-items: center;
}
</style>
